import 'package:flutter/material.dart';
import 'package:flutter_web/controller/menu_controller.dart';
import 'package:flutter_web/model/common.dart';
import 'package:flutter_web/page/header/header_icon_widget.dart';
import 'package:flutter_web/page/header/header_nav_widget.dart';
import 'package:get/get.dart';

class HeaderWidget extends StatefulWidget {
  const HeaderWidget({Key key}) : super(key: key);

  @override
  _HeaderWidgetState createState() => _HeaderWidgetState();
}

class _HeaderWidgetState extends State<HeaderWidget> {
  // 注入getX
  MenuController _menuController = Get.put(MenuController());

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      color: Colors.black,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // 导航栏 顶部内容
          Container(
            padding: EdgeInsets.only(top: 20, left: 20, right: 20, bottom: 10),
            constraints: BoxConstraints(maxWidth: 1200),
            child: buildRow(),
          ),
          SizedBox(height: 10),
          // 导航栏底部内容
          Text(
            "GGB flutter之路，只为更好的体验和更棒的知识向前出发",
            style: TextStyle(color: Colors.white, fontWeight: FontWeight.w400),
          ),
          TextButton(
            onPressed: () {},
            child: Row(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  "查看更多",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                SizedBox(width: 4),
                Icon(Icons.arrow_forward_rounded, size: 16),
              ],
            ),
          ),
          SizedBox(height: 10),
        ],
      ),
    );
  }

// 构建顶部导航栏
  Widget buildRow() {
    return Row(
      children: [
        // 最左侧的菜单导航
        buildLeftMenu(),
        // 左侧网站标题
        Text(
          "GGB-Flutter尝鲜",
          style: TextStyle(
              color: Colors.red,
              fontSize: 18,
              fontWeight: FontWeight.bold,
              decoration: TextDecoration.none),
        ),
        // 中间导航菜单
        Expanded(
          child: buildMiddleNav(),
        ),
        // 右侧联系方式
        Row(
          children: [
            buildConnectIcon(),
            SizedBox(width: 20),
            ElevatedButton(
              onPressed: () {},
              child: Text("联系我们"),
            ),
          ],
        ),
      ],
    );
  }

  // 构建中间菜单部分
  Widget buildMiddleNav() {
    if (CommmonUtils.getScreenWidth(context) < 760) {
      return Container();
    }
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ...List.generate(_menuController.menuList.length,
            (index) => HeaderNavWidget(_menuController.menuList[index]))
      ],
    );
  }

  buildConnectIcon() {
    if (CommmonUtils.getScreenWidth(context) < 580) {
      return Container();
    }
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        HeaderIconWidget(path: "assets/images/qq_icon.png"),
        HeaderIconWidget(path: "assets/images/wx_icon.png"),
      ],
    );
  }

  buildLeftMenu() {
    if (CommmonUtils.getScreenWidth(context) >= 840) {
      return Container();
    }
    return IconButton(
      icon: Icon(Icons.menu),
      color: Colors.white,
      onPressed: () {
        // 打开侧边栏菜单
        _menuController.homeScaffoldKey.currentState.openDrawer();
      },
    );
  }
}
